<template>
  <div>
    <div class="ba_f outmain">
      <div class="shuju_title">
        <div class="shuju_title_text">
          <span>当面付统计</span>
        </div>
      </div>
      <div class="main-icon flex t_l mar_t20 wid">
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">实付金额（元）</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{zhData.money || 0}}</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">预计收入（元）</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{zhData.allEstimate || 0}}</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">平台服务费（元）</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{zhData.serviceMoney || 0}}</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div class="">
              <p class="color_9 fon_14 flex-center">订单数（单）</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{zhData.count || 0}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  <div class="outmain ba_f mar_t20">
    <div class="shuju_title mar_b20">
      <div class="shuju_title_text">
        <span>当面付订单</span>
      </div>
    </div>
    <div class="flex-bet flex-y-top">
      <el-form :inline="true" :model="formInline" class="demo-form-inline searchform">
        <div>
          <el-form-item label="订单号">
            <el-input v-model="formInline.keyword" size="medium" placeholder="请输入订单号" @input="onSearch"></el-input>
          </el-form-item>
          <el-form-item label="下单时间"  class="mar_l20">
            <el-radio-group v-model="formInline.timeType" class="mar_r20" @change="onSearch">
              <el-radio-button label="1">今天</el-radio-button>
              <el-radio-button label="2">昨天</el-radio-button>
              <el-radio-button label="3">一周</el-radio-button>
              <el-radio-button label="0">全部</el-radio-button>
            </el-radio-group>
            <el-date-picker
                    v-model="formInline.timeData"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="onSearch">
            </el-date-picker>
          </el-form-item>
          <el-form-item  class="mar_l20">
            <el-button type="primary" @click="onSearch" size="medium" class="sousuo mar_r10">搜索</el-button>
            <a :href="handelExport()" class="mar_l10"><el-button  size="medium" type="primary">导出订单</el-button></a>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="mar_t20">
      <el-table
          v-loading="listLoading"
          :element-loading-text="elementLoadingText"
          :data="list"
          stripe
          class="tablecenter"
          style="width: 100%"
          @selection-change="setSelectRows">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="portrait"
            label="用户信息"
            width="200"
        >
          <template slot-scope="scope">
            <div class="flex flex-y-top flex-center">
              <div class="mar_l10">
                <div class="">
                  <div class="">{{scope.row.userName}}（UID：{{scope.row.userId}}）</div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="outTradeNo"
            label="订单编号"
        >
        </el-table-column>
        <el-table-column
            prop="payAt"
            label="支付时间"
        >
        </el-table-column>
        <el-table-column
            prop="createdAt"
            label="实付金额"
        >
          <template slot-scope="scope">
            <div class="color-green wei">+{{scope.row.money}}</div>
            <div class="fon_12">
              <span v-show="scope.row.payMode=='1'">微信支付</span>
              <span v-show="scope.row.payMode=='5'">余额支付</span>
              <span v-show="scope.row.payMode=='2'">支付宝支付</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="serviceMoney"
            label="平台服务费"
        >
          <template slot-scope="scope">
            <div class="color-red wei">-￥{{scope.row.serviceMoney}}</div>
          </template>
        </el-table-column>
        <el-table-column
            prop="storeActualMoney"
            label="预计收入"
        >
          <template slot-scope="scope">
            <div class="color-green wei">+￥{{scope.row.storeActualMoney}}</div>
          </template>
        </el-table-column>
        <el-table-column
            prop="createdAt"
            label="订单备注"
        >
          <template slot-scope="scope">
            {{scope.row.userNote || '无'}}
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
        >
          <template slot-scope="scope">
            <div class="flex-center">
              <el-button type="text" @click="handleprint(scope.row)">打印</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
              background
              layout="prev, pager, next"
              :total="page.total"
              :page-size="page.pagesize"
              :current-page.sync='page.currentPage'
              @current-change="handleCurrentChange">
      </el-pagination>
<!--      <edit ref="edit" @fetchData="fetchData"></edit>-->
    </div>
  </div>
    <div style="height: 0; overflow: hidden">
      <syPrint :data="printData" ref="syprint" />
    </div>
  </div>
</template>
<script>
  import {cashierOrderList,cashierStatistics,cashierPrint} from "@/api/instore";
  import {changeDate} from "@/utils/index";
  import {mapState} from "vuex";
  import echarts from "echarts";
  import index from "@/api";
  import {orderContent} from '@/api/order';
  import syPrint from "@/components/printTem/syPrint";
  export default {
    components:{syPrint},
    computed: {
      ...mapState(['storeId']),
    },
    created() {
      this.cashierStatistics();
      this.fetchData();
    },
    data () {
      return {
        formInline: {
          timeType: '1',
          keyword: '',
          timeData: ''
        },
        list: [],
        listLoading: false,
        selectRows: "",
        elementLoadingText: "正在加载...",
        page: {
          total: 0,
          size: 10,
          currentPage: 1,
        },
        zhData:{},
        echarts3_option: {
          color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F','#EBA675'],
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            right: 0,
            data: ['微信支付','支付宝支付','余额支付']
          },
          series: [
            {
              name: '支付金额',
              type: 'pie',
              radius: ['40%', '60%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '20',
                  fontWeight: 'bold'
                },
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                {value: 35.00, name: '微信支付'},
                {value: 20.00, name: '支付宝支付'},
                {value: 20.00, name: '余额支付'},
              ],
            }
          ]
        },
        printData: {},
      }
    },
    methods: {
      async cashierStatistics(){
        const {data} = await cashierStatistics({storeId:this.storeId,});
        this.zhData = data
      },
      mainEch32(){
        let myChart = echarts.init(document.getElementById('mainEch32'))
        myChart.setOption(this.echarts3_option, true)
      },
      async fetchData() {
        var params = {
          page: this.page.currentPage,
          keyword: this.formInline.keyword,
          timeType: this.formInline.timeType,
          startTime:this.formInline.timeData?changeDate(this.formInline.timeData[0]):'',
          endTime:this.formInline.timeData?changeDate(this.formInline.timeData[1]):'',
          storeId:this.storeId,
        }
        const {data, count} = await cashierOrderList(params);
        this.list = data;
        this.page.total = count;
        this.listLoading = false;
      },
      onSearch(){
        this.fetchData();
      },
      setSelectRows(val) {
        this.selectRows = val;
      },
      handleCurrentChange(val) {
        this.page.currentPage = val;
        this.fetchData();
      },
      handelExport() {
        let startTime = this.formInline.time ? changeDate(this.formInline.time[0]).substring(0, 10) : '';
        let endTime = this.formInline.time ? changeDate(this.formInline.time[1]).substring(0, 10) : '';
        let backendPath = index.backendPath;
        return backendPath + 'channel/in-store/cashier-order-list?export=1' + '&page=' + this.page.currentPage  + '&storeId=' + this.storeId  +'&timeType=' + this.formInline.timeType + '&keyword=' + this.formInline.keyword + '&startTime=' + startTime + '&endTime=' + endTime;
      },
      async handleprint(row){
        if(row.id){
          const {msg} = await cashierPrint({orderId:row.id});
          this.$baseMessage(msg, "success");
          const { data } = await orderContent({orderId:row.id,orderType:4});
          Object.keys(data).map(key=>{
            this.printData = data[key];
            this.$nextTick(() => {
              this.$refs.syprint.printElement(key);
            });
          })
          this.fetchData();
        }else {
          this.$baseMessage('订单错误', "error");
        }
      },
    },
  }
</script>
